<template>
  <div class="app-container">
    <Find :formList="formList" @findClicked="findClicked" @selectListShow="selectListShow" @filterMethod="filterMethod" @selectClear="selectClear" />
    <div class="flex mt10">
      <el-card shadow="never" :body-style="{ padding: '0px' }" class="mr10">
        <el-card shadow="never" :body-style="{ padding: '10px 10px 0px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">选择型体</span>
          </div>
          <Table :tableHeader="tableHeader" :tableData="tableData" :TableHeight="70" :outTableHeight="180" class="mt10" @currentRow="currentRow" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '10px 10px 0px' }">
          <Table :tableHeader="tableHeader2" :tableData="tableData2" :TableHeight="30" :outTableHeight="180" class="mt10" @currentRow="currentRow2" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '10px 10px 10px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">型体配色备注</span>
          </div>
          <el-input class="mt10" v-model="textarea" :autosize="{ minRows: 3 }" type="textarea" placeholder="" />
        </el-card>
      </el-card>

      <!-- 右侧 -->
      <el-card shadow="never" :body-style="{ padding: '0px' }">
        <el-card shadow="never" :body-style="{ padding: '10px 10px 0px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">型体颜色材料输入</span>
          </div>
          <Table :tableHeader="tableHeader3" :tableData="tableData3" class="mt15" :TableHeight="70" :outTableHeight="90" @currentRow="currentRow3" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '10px 10px 10px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">贴合子材料明细</span>
          </div>
          <Table :tableHeader="tableHeader4" :tableData="tableData4" class="mt15" :TableHeight="30" :outTableHeight="90" />
          <!-- 分页器 -->
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import fileRequest from '@/utils/fileRequest'
import service from '@/utils/request'
import { defineComponent, nextTick, onMounted, ref, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ResearchAndDevelopment'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
// 搜索模块
let formList = ref([
  {
    noSelfFilter: true,
    type: 'select',
    selectValue: '',
    selectP: '型体',
    selectLabel: '',
    selectOptions: []
  },
  {
    noSelfFilter: true,
    type: 'select',
    selectValue: '',
    selectP: '颜色名称',
    selectLabel: '',
    selectOptions: []
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '颜色代码',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出BOM表'
  }
]) as any
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
    getTableList()
  }
  if (content === '导出BOM表') {
    const res = (await fileRequest.post(`/quotation/downloadReDevelop`, {
      style: currentTableRow.value.style || '',
      color: currentTable2Row.value.color || '',
      colorCode: currentTable2Row.value.colorCode || ''
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `${currentTableRow.value.style}_${currentTable2Row.value.color}_${Date.now()}.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}
const tempsSelectP = ref({})
let arr = [] as String[]
const selectListShow = async (visible: boolean, item: any) => {
  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体' && visible) {
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体').selectValue = ''
    getStyleList()
  }
  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体' && !visible) {
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称').selectValue =
      ''
    getColorList()
    getTableList()
  }
  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称' && visible && formList.value[0].selectValue === '') {
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称').selectValue =
      ''
    getColorAllCode()
  }
  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称' && !visible) {
    getColorCode()
    getTableList()
  }
}
const filterMethod = (BigVal: any, selectOptions: any, copyOptions: any, item: any) => {
  // console.log(BigVal,);
  if (BigVal !== '' && item.copyOptions && item.copyOptions.length != 0) {
    selectOptions.splice(0) // 删除selectOptions
    item.copyOptions
      .filter((item: any) => item.optionValue.indexOf(BigVal) !== -1)
      .forEach((item: any) => {
        selectOptions.push(item)
      })
  } else if (BigVal === '' && item.copyOptions && item.copyOptions.length != 0) {
    // 先走filterMethod
    selectOptions.splice(0) // 删除selectOptions
    item.copyOptions.forEach((item: any) => {
      selectOptions.push(item)
    })
    // console.log(222222222222, item);
  }
}
const selectClear = (item: any) => {
  console.log(item)

  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体') {
    formList.value[1].selectValue = ''
    formList.value[2].inputValue = ''
    getColorAllCode()
  }
  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称') {
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色代码'
    ).inputValue = ''
  }
  getTableList()
}
// 获取型体下拉框数据
const getStyleList = async () => {
  let style = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体')
  style.selectOptions = []
  const styleList = await service.post<any, any>('/quotation/reAndDevelop', {
    style: style?.selectValue || '',
    color: '',
    colorCode: ''
  })
  for (const key in styleList) {
    ;(style?.selectOptions as any[]).push({
      optionKey: key,
      optionValue: key,
      optionLabel: key
    })
  }
  style.copyOptions = JSON.parse(JSON.stringify(style.selectOptions))
}
// 获取颜色下拉框数据
const getColorList = async () => {
  let style = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体')
  let color = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称')
  color.selectOptions = []
  const styleList = await service.post<any, any>('/quotation/reAndDevelop', {
    style: style?.selectValue || '',
    color: '',
    colorCode: ''
  })
  for (const key in styleList) {
    if (key === style.selectValue) {
      styleList[key].forEach((item: any) => {
        ;(color?.selectOptions as any[]).push({
          optionKey: item.color,
          optionValue: item.color,
          optionLabel: item.color
        })
      })
    }
  }
  color.copyOptions = JSON.parse(JSON.stringify(color.selectOptions))
}
// 获取颜色代码
const getColorCode = async () => {
  let style = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体')
  let color = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称')
  // 如果是一开始直接选择颜色名称，走下面。如果是从型体走的，走else
  if (color.selectValue && color.selectValue.includes('  ')) {
    formList.value[0].selectValue = color.selectValue.split('  ')[2] || ''
    formList.value[1].selectValue = color.selectValue.split('  ')[0] || ''
    formList.value[2].inputValue = color.selectValue.split('  ')[1] || ''
  } else {
    const colorCode = await service.post<any, any>('/quotation/reAndDevelop', {
      style: style?.selectValue || '',
      color: color.selectValue || '',
      colorCode: ''
    })
    formList.value[2].inputValue = colorCode[style.selectValue][0].colorCode
  }
}
// 获取颜色下拉框所有的
const getColorAllCode = async () => {
  let color = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称')
  const res = await service.get<any, any>('/quotation/getReAndDevelopCondition')
  color.selectOptions = []
  res.list.forEach((item: any) => {
    ;(color?.selectOptions as any[]).push({
      optionKey: item.color,
      optionValue: `${item.color}  ${item.colorCode}  ${item.style}`,
      optionLabel: item.color,
      LeftLabel: item.color,
      RightLabel: item.style
    })
  })
  color.copyOptions = JSON.parse(JSON.stringify(color.selectOptions))
}
// 表一模块
const tableHeader = ref([
  {
    label: '型体',
    prop: 'style'
  }
])
const tableData = ref([])
const getTableList = async (allColor: boolean = false) => {
  let color = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称')
  let style = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '型体')
  let colorCode = formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色代号')
  const res = await service.post<any, any>('/quotation/reAndDevelop', {
    style: style?.selectValue || '',
    color: color?.selectValue || '',
    colorCode: colorCode?.inputValue || ''
  })
  tableData.value = []
  for (const key in res) {
    ;(tableData.value as any[]).push({
      style: key
    })
  }
  currentRow()
}
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  getTableList2()
}

onMounted(() => {
  getTableList()
  // getStyleList()
  // getColorList()
})
// 表二模块
const imgList = ref([])
const tableHeader2 = ref([
  {
    cfmFlag: '#80ff00',
    label: '颜色',
    prop: 'color'
  },
  {
    label: '颜色代号',
    prop: 'colorCode'
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList
  }
])
const tableData2 = ref<any>([])
const getTableList2 = async () => {
  const res = await service.post<any, any>('/quotation/reAndDevelop', {
    style: currentTableRow.value.style || '',
    color: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '颜色名称')
      .selectValue,
    colorCode: ''
  })
  tableData2.value = []
  for (const key in res) {
    if (key === currentTableRow.value.style) {
      res[key].forEach((item: any) => {
        ;(tableData2.value as any[]).push(item)
      })
    }
  }
  currentRow2()
}
const textarea = ref('')
const currentTable2Row = ref({}) as any
const currentRow2 = async (row: any = tableData2.value[0]) => {
  currentTable2Row.value = row
  getTable3List()
  textarea.value = tableData2.value.find((item: any) => item.color === row.color).remark
}

// 表三模块
const tableData3 = ref([])
const tableHeader3 = ref([
  {
    label: '序号',
    prop: 'seqNo',
    width: 50
  },
  {
    label: '部位',
    prop: 'partName'
  },
  {
    label: '分段',
    prop: 'segment',
    width: 50
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    width: 120
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: 160
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: 50
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: 50
  },
  {
    label: '尺码起',
    prop: 'size1'
  },
  {
    label: '尺码止',
    prop: 'size2'
  },
  {
    label: '供应商',
    prop: 'vendor'
  },
  {
    label: '用量',
    prop: 'usage'
  },
  {
    label: '计算方式',
    prop: 'usageType'
  },
  {
    label: '领用单位',
    prop: 'drawDept'
  },
  {
    label: '号码类型',
    prop: 'sizeType'
  },
  {
    label: '主辅料',
    prop: 'date'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
const currentRow3 = async (row: any) => {
  let { mtlNo } = row
  getTable4List(mtlNo)
}
const getTable3List = async () => {
  let tableDataList3 = await service.post<any, any>('/quotation/bomStyleMaterial', {
    color: currentTable2Row.value.color || '',
    colorCode: '',
    style: currentTableRow.value.style || ''
  })
  tableData3.value = tableDataList3
}

// 表四模块
const tableData4 = ref([])
const tableHeader4 = ref([
  {
    label: '物料编码',
    prop: 'subMtlNo'
  },
  {
    label: '材料颜色',
    prop: 'subMtlColor'
  },
  {
    label: '材料名称',
    prop: 'subMtlName'
  },
  {
    label: '规格',
    prop: 'subMtlSpec'
  },
  {
    label: '单位',
    prop: 'subMtlUnit'
  },
  {
    label: '加工方式',
    prop: 'prdType'
  },
  {
    label: '供应商',
    prop: 'vendor'
  },
  {
    label: '比例',
    prop: 'percent'
  },
  {
    label: '是否请购',
    prop: 'purFlag'
  }
])
const getTable4List = async (mtlNo: any) => {
  let tableDataList4 = await service.get<any, any>(`/quotation/bomStyleDetail`, {
    params: {
      mtlNo
    }
  })
  tableData4.value = tableDataList4
}
</script>
<style lang="less" scoped></style>
